.app-flex-wrap {
    display: flex;

    &.app-flex-col {
        flex-direction: row;
    }

    &.app-flex-row {
        flex-direction: column;
    }

    &.app-flex-center {
        justify-content: center;
    }

    &.app-flex-middle {
        align-items: center;
    }

    .app-flex-item {
        flex: 1;
    }
}

// 显示一行文字，多余用省略号
.app-ellipsis {
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;

}

// 显示两行文字，多余用省略号
.app-ellipsis-2 {
    display           : -webkit-box;
    overflow          : hidden;
    text-overflow     : ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

// 边框
[class*='app-border'] {
    position: relative;
}

[class*='app-border']::after {
    position         : absolute;
    box-sizing       : border-box;
    content          : ' ';
    pointer-events   : none;
    top              : -50%;
    right            : -50%;
    bottom           : -50%;
    left             : -50%;
    border           : 0 solid #ebedf0;
    -webkit-transform: scale(0.5);
    transform        : scale(0.5);
}

.app-border::after {
    border-width: 1px;
}

.app-border-t::after {
    border-top-width: 1px;
}

.app-border-r::after {
    border-right-width: 1px;
}

.app-border-b::after {
    border-bottom-width: 1px;
}

.app-border-l::after {
    border-left-width: 1px;
}


// 懒加载图片出场动画
[lazy=loaded] {
    transition: opacity .3s;
    opacity   : 1;
    animation : app-lazy 1s;
}

@keyframes app-lazy {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

// 骨架闪烁动画
@keyframes app-ske-animation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}